<template>
  <div class="minetop">
    <div class="ico">
      <div class="icobox">
        <van-icon name="comment-o" />
        <van-icon name="setting-o" id="setup" @click="fun('/setup')" />
      </div>
    </div>
    <div class="user">
      <div class="transition">
        <img :src="userimg" alt />
        <div class="person">
          <div class="name" @click="iflogin(username)">{{username}}</div>
          <div class="fans">
            <span>粉丝 0</span> |
            <span>关注 0</span>
          </div>
        </div>
      </div>
      <!-- 用户登录了才显示 -->
      <div class="myself" v-if="istoken">
        <span @click="fun('/mineself')">个人主页 &gt;</span>
      </div>
    </div>
    <div class="vip">
      <div class="dengji">
        <div class="iconfont icon-dengji"></div>
        <div class="text">
          <p>会员等级</p>
          <span>写评价助升级</span>
        </div>
      </div>
      <div class="goup">
        <div class="iconfont icon-huiyuanvip"></div>
        <div class="text">
          <p>VIP俱乐部</p>
          <span>写评价领特权</span>
        </div>
      </div>
      <div class="nodecenter">
        <div class="iconfont icon-dengpao"></div>
        <div class="text">
          <p>笔记达人中心</p>
          <span>写笔记做达人</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { userinformation } from "../../../api/cheyi.js";

export default {
  methods: {
    // 登录注册，我的主页，订单
    fun(val) {
      this.$router.push(val);
    },
    iflogin(val) {
      if ((val = "点击登录")) {
        this.$router.push("/login");
      } else {
        this.$router.push("/mineself");
      }
    }
  },
  data() {
    return {
      arr: [],
      username: "",
      userimg: "",
      // 有token，即登录了才会显示“我的主页”
      istoken: false
    };
  },
  computed: {
    user() {
      return this.username.toUpperCase();
    }
  },
  created() {
    //   本地登陆了，显示名字
    if (localStorage.getItem("token")) {
      this.istoken = true;
      this.username = localStorage.getItem("token");
      userinformation({ uid: 10 }).then(ok => {
        console.log(ok.data.data);
        this.userimg = ok.data.data.userImg;
        console.log(ok.data.data.userImg);
      });
    } else {
      // 未登录，显示点击登录
      this.username = "点击登录";
      this.istoken = false;
      this.userimg =
        "https://img2.baidu.com/it/u=3871105402,2821163553&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1664902800&t=8e84da36820f84d9d5809a8264412a7d";
    }
  }
};
</script>

<style lang="scss" scoped>
.minetop {
  width: 100%;
  position: relative;
  .ico {
    height: 13.333vw;
    .icobox {
      position: absolute;
      right: 0;
      line-height: 13.333vw;
    }
    ::v-deep .van-icon {
      font-size: 5.867vw;
      padding: 0 2.667vw;
      color: black;
      font-weight: bolder;
    }
  }
  .user {
    height: 70%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .transition {
      display: flex;
      justify-content: start;
      img {
        width: 12.8vw;
        border-radius: 50%;
      }
      .person {
        margin-top: 1.6vw;
        margin-left: 2.667vw;
        line-height: 5.333vw;
        .name {
          font-size: 5.333vw;
          font-weight: bolder;
        }
        .fans {
          font-size: 3.733vw;
          color: #6b6158;
        }
      }
    }
    .myself {
      text-align: center;
      font-size: 3.733vw;
      width: 20vw;
      height: 6.4vw;
      line-height: 6.4vw;
      border-radius: 3.2vw;
      background-color: rgba($color: #fff, $alpha: 0.7);
    }
  }
  .vip {
    width: 100%;
    height: 16.533vw;
    background-color: #fff;
    border-radius: 1.333vw;
    margin-top: 4vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
    > div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .text {
        padding: 0 1.333vw;
        p {
          font-size: 3.733vw;
          color: #171717;
          font-weight: bolder;
        }
        span {
          font-size: 2.667vw;
          color: #6b6158;
        }
      }
    }
    .iconfont {
      font-size: 6.4vw;
      color: #fe9b00;
    }
  }
}
</style>